{% extends 'base.html' %}
{% block css-content %} 
    <link rel="stylesheet" href="/static/jstree/css/style.min.css" />
    <link href="/static/css/doublebox-bootstrap.css" rel="stylesheet">     
    <link rel="stylesheet" href="/static/jquery-confirm/jquery-confirm.min.css">
    <link href="/static/datatable/datatables.net-bs/css/dataTables.bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="/static/css/bootstrap-select.css"> 
    <link rel="stylesheet" href="/static/css/jquery.orgchart.css">	
    <link href="/static/datatable/datatables.net-buttons-bs/css/buttons.bootstrap.min.css" rel="stylesheet">
    <link href="/static/datatable/datatables.net-fixedheader-bs/css/fixedHeader.bootstrap.min.css" rel="stylesheet">
    <link href="/static/datatable/datatables.net-responsive-bs/css/responsive.bootstrap.min.css" rel="stylesheet">
    <link href="/static/datatable/datatables.net-scroller-bs/css/scroller.bootstrap.min.css" rel="stylesheet">  
    <!-- bootstrap-daterangepicker -->
    <link href="/static/bootstrap-daterangepicker/daterangepicker.css" rel="stylesheet">    
    <link href="http://apps.bdimg.com/libs/highlight.js/9.1.0/styles/default.min.css" rel="stylesheet">
    <script src="http://apps.bdimg.com/libs/highlight.js/9.1.0/highlight.min.js"></script>
    <script>hljs.initHighlightingOnLoad();</script>    
	<style type="text/css"> 	
		.assets-online{
		    color:green;
		}
		.assets-offline{
		    color:red;
		}	
        .modal-select{
            -moz-user-select:none;/*火狐*/
            -webkit-user-select:none;/*webkit浏览器*/
            -ms-user-select:none;/*IE10*/
            -khtml-user-select:none;/*早期浏览器*/
            user-select:none;
            }
          .modal-header{
            cursor:move;
          }	
		td.details-control {
		    background: url('/static/images/details_open.png') no-repeat center center; */
		    cursor: pointer;
		}
		tr.shown td.details-control {
		    background: url('/static/images/details_close.png') no-repeat center center;
		} 
		#compile-editor-add {
			width: 100%;
			height: 200px;
	   }	
		#compile-editor-modf {
			width: 100%;
			height: 200px;
	   }          		
	</style>     
{% endblock %}
{% block page-content %}
        <div class="clearfix"></div>
        
            <div class="row">
              <div class="col-md-12">
                <div class="x_panel">
                  <div class="x_title">
                    <h2>数据库查询入口<small>Database Query</small></h2>
                    <ul class="nav navbar-right panel_toolbox">
                    </ul>
                    <div class="clearfix"></div>
                  </div>
                  <div class="x_content">
                    <div class="row">
                      <div class="col-sm-3 mail_list_column"> 
                      <input id="search-input" type="text" class="form-control" placeholder="检索关键词...">   
                      <!-- <span class="section"></span>  -->
					  <legend></legend>                
                      <div id="dbTree"></div>                                     
                      </div>
                      <!-- /MAIL LIST -->

                      <!-- CONTENT MAIL -->              
                  		<div class="col-sm-9 mail_view">
		                    <table id="mysqlStatusTable" style="display:none;" class="table table-striped table-bordered">
		                      <caption>数据库当前状态</caption>
		                      <thead>
		                        <tr>
		                        	<th>名称</th>	
									<th>当前值</th>	
									<th class="center">指标</th>		
									<th>级别</th>	
									<th>备注</th>										
		                        </tr>
		                      </thead>
		                      <tbody>
		                      </tbody>
		                    </table>    
		                    <table id="mysqlInnodbStatusTable" style="display:none;" class="table table-striped table-bordered">
		                      <caption>Innodb存储引擎当前状态</caption>
		                      <thead>
		                        <tr>
		                        	<th>名称</th>	
									<th>当前值</th>	
									<th class="center">指标</th>	
									<th>级别</th>		
									<th>备注</th>										
		                        </tr>
		                      </thead>
		                      <tbody>
		                      </tbody>
		                    </table> 
		                    <table id="mysqlInnodbTrxStatusTable" style="display:none;" class="table table-striped table-bordered">
		                      <caption>Innodb锁等待</caption>
		                      <thead>
		                        <tr>
		                        	<th>名称</th>	
									<th>当前值</th>	
									<th class="center">指标</th>		
									<th>备注</th>										
		                        </tr>
		                      </thead>
		                      <tbody>
		                      </tbody>
		                    </table> 		                    
		                    <table id="mysqlPxcTable" style="display:none;" class="table table-striped table-bordered">
		                      <caption>PXC当前状态</caption>
		                      <thead>
		                        <tr>
		                        	<th>名称</th>	
									<th>当前值</th>	
									<th>指标</th>		
									<th>级别</th>	
									<th>备注</th>										
		                        </tr>
		                      </thead>
		                      <tbody>
		                      </tbody>
		                    </table> 	
		                    <table id="mysqlProcesslistTable" style="display:none;" class="table table-striped table-bordered">
		                    </table> 		                    	                    			                               			
                  		</div>    
                		<div class="col-sm-3 mail_list_column"> </div>                  		                  
                      	<div class="col-sm-9 mail_view">
		                    <table id="UserDatabaseListTable" class="table table-striped table-bordered">
		                      <thead>
		                        <tr>
		                        	<th>备注</th>	
									<th>数据库</th>	
									<th>数据库地址</th>		
									<th>端口</th>										
									<th>读写类型</th>		
									<th class="text-center">操作</th>
		                        </tr>
		                      </thead>
		                      <tbody>
		                      </tbody>
		                    </table>                      		
                     	 </div> 
              			<div class="col-sm-3 mail_list_column"> </div>           
                                 
                      <div class="col-sm-9 mail_view">
                        <div class="inbox-body" >
			                <div class="" role="tabpanel" data-example-id="togglable-tabs"  id="add_inventory">
			                  <ul id="myTab" class="nav nav-tabs bar_tabs" role="tablist">
			                    <li role="presentation" id="li_tab_content1" class="active"><a href="#tab_content1" id="query" role="tab" data-toggle="tab" aria-expanded="true"><i class="fa fa-cubes"></i> SQL Query</a>
			                    </li>
			                    <li role="presentation" id="li_tab_content2" class=""><a href="#tab_content2" role="tab" id="tableDDL" data-toggle="tab" aria-expanded="false"><i class="fa fa-bar-chart"></i> 表结构查询</a>
			                    </li>  		                                                                                   
			                  </ul>
			                  <div class="tab-content">
			                    <div role="tabpanel" class="tab-pane fade active in" id="tab_content1" aria-labelledby="#query">
			                    
									<div class="col-md-12 col-xs-12">

										<form role="form" method="post" id="exec_db_query" class="main form-horizontal form-label-left"  novalidate>	
											<div class="form-group">
												<label id="dbChoice">查询入口<i class="fa fa-info-circle" data-toggle="tooltip" title="选择常用SQL"></i> : </label>	
												<select required="required" class="selectpicker form-control" data-live-search="true" title="常用查询" data-size="10" data-width="20%" name="db_env" id="db_user_sql" autocomplete="off"></select>	
											</div>									
											<legend></legend>													
											<div class="form-group">
												<label>SQL内容<i class="fa fa-info-circle" data-toggle="tooltip" title="输入查询SQL"></i> : </label>	
												<div id="compile-editor-add" class="ace_editor"></div> 	
											</div>																																						
											<lable><button type="button" value="" class="btn btn-default btn-sm disabled" id="db_query_btn">请先选择数据库</button></lable>
											{% csrf_token %}
										</form> 
									</div>
									<div class="hr hr32 hr-dotted"></div>
						            <div class="col-md-12 col-xs-12" id="show_sql_result" style="display:none;">				
				
						                <div class="x_panel">
						                  <div class="x_title">
						                    <h2><i class="fa fa-bars"></i> 查询结果 <small>SQL Query History</small></h2>
						                    <ul class="nav navbar-right panel_toolbox">
						                      <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
						                      </li>
						                      <li class="dropdown">
						                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a>
						                      </li>
						                      <li><a class="close-link"><i class="fa fa-close"></i></a>
						                      </li>
						                    </ul>
						                    <div class="clearfix"></div>
						                  </div>
						                  <div class="x_content">
						
						
						                    <div class="" role="tabpanel" data-example-id="togglable-tabs">
						                      <ul id="myTab" class="nav nav-tabs bar_tabs" role="tablist">
						                        <li role="presentation" class="active"><a href="#history_sql" role="tab" id="profile-tab" data-toggle="tab" aria-expanded="false">历史查询</a>
						                        </li>				                      
						                        <li role="presentation" class=""><a href="#query_result" id="home-tab" role="tab" data-toggle="tab" aria-expanded="true">查询结果</a>
						                        </li>
						                      </ul>
						                      <div class="tab-content">
						                        <div role="tabpanel" class="tab-pane fade" id="query_result" aria-labelledby="home-tab">
						                          	<div id="query_result">
								                    </div> 
						                        </div>
						                        <div role="tabpanel" class="tab-pane fade active in" id="history_sql" aria-labelledby="profile-tab">
								                    <table id="databaseSQLExecuteHistroy" class="table">
								                      <thead>
								                        <tr>
											                <th>操作</th>
											                <th>环境</th>
											                <th>数据库地址</th>
											                <th>数据库名</th>
											                <th>执行人</th>
											                <th>SQL</th>
											                <th>执行状态</th>
											                <th>耗时(sec)</th>
											                <th>影响行数</th>
											                <th>执行结果</th>
											                <th>执行时间</th>
								                        </tr>
								                      </thead>
								                      <tbody>
								                      </tbody>
								                    </table>
						                        </div>
						                      </div>
						                    </div>
						
						                  </div>
						                </div>
				
				                  </div>
				                </div>
					              			                    
			                    <div role="tabpanel" class="tab-pane fade" id="tab_content2" aria-labelledby="#tableDDL">
									<div class="col-lg-12">
										<legend>
											<p id="dbTables"></p>
										</legend>
				                      <div class="col-sm-3 mail_list_column"> 
				                      <input id="table-search-input" type="text" class="form-control" placeholder="检索关键词...">   
				                      <!-- <span class="section"></span>  -->
									  <legend></legend>                
				                      <div id="dbTableTree"></div>                                     
				                      </div>	
				                      <div class="col-sm-9 mail_view">
				                        <div id="schema_result">		                        
				                        </div>					                      
				                      </div>			                        						
									 </div>						 
			                    </div>  			                    			                          		                           
			                                                
			                </div>                                  
			              </div>
                        </div>
                      </div>
                      
                      <!-- /CONTENT MAIL -->
                    </div>
                  </div>
                </div>
              </div>
            </div>        
               
		        		                                           
{% endblock %}
{% block js-content %}
	<script type="text/javascript" src="/static/js/tagcanvas/jquery.tagcanvas.js"></script>    
	<script src="/static/jquery-confirm/jquery-confirm.min.js"></script>
	<script src="/static/validator/validator.js"></script>
	<script src="/static/jstree/js/jstree.min.js"></script>
    <script src="/static/datatable/datatables.net/js/jquery.dataTables.min.js"></script>
	<script src="/static/datatable/datatables.net-bs/js/dataTables.bootstrap.min.js"></script>	
    <script src="/static/datatable/datatables.net-buttons/js/dataTables.buttons.min.js"></script>
    <script src="/static/datatable/datatables.net-buttons-bs/js/buttons.bootstrap.min.js"></script>
    <script src="/static/datatable/datatables.net-buttons/js/buttons.flash.min.js"></script>
    <script src="/static/datatable/datatables.net-buttons/js/buttons.html5.min.js"></script>
    <script src="/static/datatable/datatables.net-buttons/js/buttons.print.min.js"></script>	
	<script src="/static/js/database/mysql/query.js"></script>		
	<script src="/static/ace/js/ace.js" type="text/javascript" charset="utf-8"></script>
	<script src="/static/ace/js/ext-language_tools.js" type="text/javascript" charset="utf-8"></script>
	<script src="/static/ace/js/ext-old_ie.js" type="text/javascript" charset="utf-8"></script>
	<script src="/static/ace/js/theme-monokai.js" type="text/javascript" charset="utf-8"></script>   	
{% endblock %}